<template>
  <div class="container">
    <!-- 页面名称 -->
    <div class="header">
      <span>操作日志</span>
    </div>

    <!-- 内容 -->
    <el-container class="body">
      <!-- 树形 -->
      <el-aside width="200px" class="mainaside">
        <div class="user_tree">
          <el-tree
            node-key="fmoduleid"
            accordion
            highlight-current
            default-expand-all
            :expand-on-click-node="false"
            :props="pageData.treeParams.props"
            :data="pageData.treeParams.treeData"
            :default-expanded-keys="pageData.treeParams.defaultExpKeys"
            @current-change="onHandleTreeCurrentChange"
          >
          </el-tree>
        </div>
      </el-aside>
      <el-main class="mainmain">
        <div class="firsthe">
          <div class="search">
            <el-input
              v-model="pageData.queryParams.keyword"
              clearable
              placeholder="按描述搜索"
              style="max-width: 180px"
              @blur="onHandleKeywordBlur"
              @clear="onHandleKeywordBlur"
              @keyup.enter="onHandleKeywordBlur"
              ><template #prepend>
                <el-icon @click="onHandleKeywordBlur"><Search /></el-icon>
              </template>
            </el-input>

            <el-button type="primary" plain @click="onHandleSearch"
              >搜索</el-button
            >
            <el-button type="warning" plain @click="onHandleReset"
              >重置</el-button
            >
          </div>
        </div>

        <el-row class="row-2">
          <!-- tabel -->
          <el-table
            ref="logTable"
            class="log-table"
            row-key="fid"
            stripe
            border
            highlight-current-row
            v-loading="pageData.tableParams.tableLoading"
            :data="pageData.tableParams.tableData"
            @selection-change="onHandleSelectionChange"
          >
            <!-- @current-change="(row) => (pageData.tableParams.currentRow = row)" -->
            <el-table-column
              v-if="pageData.permissions.Del"
              type="selection"
              width="45"
              align="center"
            >
            </el-table-column>
            <el-table-column
              v-else
              type="index"
              label="序号"
              align="center"
              width="60"
            >
            </el-table-column>
            <el-table-column
              prop="fusername"
              label="操作人"
              width="120"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="fmodulename"
              label="模块"
              width="160"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="fopername"
              label="操作"
              width="160"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="fdesc"
              label="描述"
              min-width="180"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="fipaddress"
              label="IP地址"
              width="136"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="flogtime"
              label="日志时间"
              width="150"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              v-if="pageData.permissions.Del"
              label="操作"
              width="60"
              align="center"
              show-overflow-tooltip
            >
              <template #default="{ row }">
                <el-icon
                  v-if="pageData.permissions.Del"
                  title="删除"
                  style="cursor: pointer; margin: 0 3px"
                  @click="onHandleDel(row.fid)"
                >
                  <Delete />
                </el-icon>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页查询 -->
          <el-col :span="24">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="pageData.tableParams.pageSizeOptions"
              :current-page="pageData.queryParams.pageIndex"
              :page-size="pageData.queryParams.pageSize"
              :total="pageData.tableParams.total"
              @current-change="onHandleCurrentChange"
              @size-change="onHandleSizeChange"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { onMounted, nextTick, reactive, ref, toRefs } from "vue";
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import utils from "@/common/utils";
import enums from "@/common/enums";

import {
  getMenuTree,
  queryLogPageList,
  deleteLog,
  batchDelLog,
} from "@/api/system";

import { Delete, Search } from "@element-plus/icons-vue";

export default {
  name: "LogInfo",
  components: { Delete, Search },
  setup(props, context) {
    onMounted(() => {
      nextTick(pageFunc.getTreeData);
    });

    const logTable = ref();
    const pageState = reactive({
      pageData: {
        permissions: {
          Del: utils.checkPermission("syslog_delete"),
        },
        screenHeight: 0,
        treeParams: {
          props: {
            label: "fmodulename",
            children: "children",
            isLeaf: "isleaf",
          },
          treeData: [],
          defaultExpKeys: [],
          currentNode: {},
        },
        queryParams: {
          pageIndex: 1,
          pageSize: 10,
          sortFields: "",
          menuid: "",
          keyword: "",
          state: enums.StateEnum.Delete.value,
        },
        tableParams: {
          tableLoading: false,
          tableHeight: 0,
          // tableColumns: [],
          pageSizeOptions: ["10", "15", "30", "50", "100", "200"],
          total: 0,
          tableData: [],
          multipleSelection: [],
          currentRow: {},
        },
      },
    });
    const pageFunc = {
      getTreeData: () => {
        const loading = ElLoading.service({
          lock: true,
          background: "rgba(0, 0, 0, 0.7)",
        });
        // 去获取菜单树 测通
        getMenuTree()
          .then((ret) => {
            // console.log('获取目录树',ret.data)
            loading.close();
            pageState.pageData.treeParams.treeData = [
              {
                fmoduleid: "",
                fmodulename: "全部",
                children: ret,
              },
            ];
          })
          .catch((error) => {
            loading.close();
            ElMessage.error(error.message || "请求出错");
          });
      },
      getTableData: () => {
        pageState.pageData.tableParams.currentRow = {};
        pageState.pageData.tableParams.tableLoading = true;
        // 获取表格数据 测试通过
        queryLogPageList(pageState.pageData.queryParams)
          .then((ret) => {
            // console.log("获取表格数据", ret.data);
            pageState.pageData.tableParams.tableData = ret.data;
            pageState.pageData.tableParams.total = ret.recordsTotal;
            pageState.pageData.tableParams.tableLoading = false;
          })
          .catch((error) => {
            ElMessage.error(error.message || "请求出错");
            pageState.pageData.tableParams.tableLoading = false;
          });
      },

      onHandleTreeCurrentChange: (data) => {
        pageState.pageData.treeParams.currentNode = data;
        pageState.pageData.queryParams.keyword = "";
        pageState.pageData.queryParams.pageIndex = 1;
        pageState.pageData.queryParams.menuid = data.fmoduleid;
        pageFunc.getTableData();
      },
      onHandleSelectionChange: (val) => {
        pageState.pageData.tableParams.multipleSelection = val;
      },
      onHandleCurrentChange: (e) => {
        pageState.pageData.queryParams.pageIndex = e;
        pageFunc.getTableData();
      },
      onHandleSizeChange: (e) => {
        pageState.pageData.queryParams.pageIndex = 1;
        pageState.pageData.queryParams.pageSize = e;
        pageFunc.getTableData();
      },
      // 模糊查询
      onHandleSearch: () => {
        pageFunc.getTableData();
      },
      onHandleReset: () => {
        pageState.pageData.queryParams.keyword = "";
        pageFunc.getTableData();
      },
      onHandleKeywordBlur: () => {
        pageState.pageData.queryParams.pageIndex = 1;
        pageFunc.getTableData();
      },
      onHandleDel: (id) => {
        if (utils.isEmpty(id)) {
          ElMessage.warning("请选中需要操作的数据行");
          return;
        }
        ElMessageBox.confirm("此操作将删除该日志, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            const loading = ElLoading.service({
              lock: true,
              background: "rgba(0, 0, 0, 0.7)",
            });
            deleteLog(id)
              .then((res) => {
                console.log("first", res);
                loading.close();
                ElMessage.success("删除成功");
                pageFunc.getTableData();
              })
              .catch((error) => {
                console.log("error", error);
                loading.close();
                ElMessage.error(error.message || "请求出错");
              });
          })
          .catch(() => {});
      },
      onHandleBatchDel: () => {
        if (
          utils.isEmpty(pageState.pageData.tableParams.multipleSelection) ||
          pageState.pageData.tableParams.multipleSelection.length < 1
        ) {
          ElMessage.warning("请选中需要操作的数据行");
          return;
        }
        ElMessageBox.confirm("此操作将批量删除日志, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            const loading = ElLoading.service({
              lock: true,
              background: "rgba(0, 0, 0, 0.7)",
            });
            batchDelLog(
              pageState.pageData.tableParams.multipleSelection.map((p) => p.fid)
            )
              .then(() => {
                loading.close();
                ElMessage.success("删除成功");
                pageFunc.getTableData();
              })
              .catch((error) => {
                loading.close();
                ElMessage.error(error.message || "请求出错");
              });
          })
          .catch(() => {});
      },
    };

    return {
      logTable,
      ...toRefs(pageState),
      ...pageFunc,
    };
  },
};
</script>
<style lang="scss" scoped>
.container {
  padding: 0;
  margin: 0;
  .header {
    width: 100%;
    background-color: white;
    user-select: none;

    text-align: left;
    span {
      line-height: 50px;
      font-size: 18px;
      font-weight: 700;
      text-align: left;
      margin-left: 20px;
    }
  }

  .body {
    margin-top: 20px;
    background-color: white;
    height: 77vh;
    // 树形下拉框
    .mainaside {
      background-color: rgb(230, 240, 250);
      border-right: 1px solid #ccc;
      .user_tree {
        .el-tree {
          border-bottom: 1px solid #ddd;
        }
      }
    }
    // 内容表格
    .mainmain {
      width: 100%;
      .firsthe {
        display: flex;
        justify-content: end;
        margin-bottom: 20px;
        .search {
          .el-input {
            margin-right: 14px;
          }
        }
      }
    }
  }
}
</style>

<style>
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.el-dialog .el-dialog__header {
  padding: 20px 0;
  padding-left: 20px;
  margin: 0;

  word-break: break-all;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.el-select {
  width: 100%;
  border: none;
  border-radius: 0;
}
.el-select .el-option {
  width: 100%;
  border: none;
  border-radius: 0;
}
</style>
